<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    
    <script>
        const PENDING = 'pending'
        const FULFILLED = 'fulfilled'
        const REJECTED = 'rejected'
        class Mypromise {
            #state = PENDING
            #result = undefined
            #hanlder = []
            #runAsyncTask(callback) {
                if (typeof queueMicrotask === "function") {
                    queueMicrotask(callback)
                } else if (typeof MutationObserver === "function") {
                    const obs = new MutationObserver(callback)
                    const divNode = document.createElement('div')
                    obs.observe(divNode, { childList: true })
                    divNode.innerText = '111'
                } else {
                    setTimeout(callback, 0);
                }
            }
            #resolvePromise(Mypromise2, x, resolve, reject) {
                if (x === Mypromise2) {
                    throw new TypeError('报错信息')
                }
                if (x instanceof Mypromise) {
                    x, then((res) => {
                        resolve(res)
                    }, err => {
                        reject(err)
                    })
                }
            }
            constructor(func) {
                const resolve = (result) => {
                    if (this.#state === PENDING) {
                        this.#state = FULFILLED
                        this.#result = result
                        this.#hanlder.forEach(({ onFulfilled }) => {
                            onFulfilled(this.#result)
                        })
                    }

                }
                const reject = (result) => {
                    if (this.#state === PENDING) {
                        this.#state = REJECTED
                        this.#result = result
                        this.#hanlder.forEach(({ onRejected }) => {
                            onRejected(this.#result)
                        })
                    }
                }

                try {
                    func(resolve, reject)
                } catch (error) {
                    reject(error)
                }
            }
            then(onFulfilled, onRejected) {
                onFulfilled = typeof onFulfilled === "function" ? onFulfilled : x => x
                onRejected = typeof onRejected === "function" ? onRejected : x => { throw x }
                const Mypromise2 = new Mypromise((resolve, reject) => {
                    if (this.#state === FULFILLED) {
                        this.#runAsyncTask(() => {
                            try {
                                const x = onFulfilled(this.#result)
                                this.#resolvePromise(Mypromise2, x, resolve, reject)
                            } catch (error) {
                                reject(error)
                            }
                        })
                    } else if (this.#state === REJECTED) {
                        this.#runAsyncTask(() => {
                            try {
                                const x = onRejected(this.#result)
                                this.#resolvePromise(Mypromise2, x, resolve, reject)
                            } catch (error) {
                                reject(error)
                            }
                        })
                    } else if (this.#state === PENDING) {
                        this.#result.push({
                            onFulfilled: () => {
                                this.#runAsyncTask(() => {
                                    try {
                                        const x = onFulfilled(this.#result)
                                        this.#resolvePromise(Mypromise2, x, resolve, reject)
                                    } catch (error) {
                                        reject(error)
                                    }
                                })
                            },
                            onRejected: () => {
                                this.#runAsyncTask(() => {
                                    try {
                                        const x = onRejected(this.#result)
                                        this.#resolvePromise(Mypromise2, x, resolve, reject)
                                    } catch (error) {
                                        reject(error)
                                    }
                                })
                            }
                        })
                    }
                })
                return Mypromise2
            }
            catch(onRejected) {
                return this.then(undefined, onRejected)
            }
            finally(onFinally) {
                return this.then(onFinally, onFinally)
            }
        }

        //原型：函数都有一个protype属性，这个属性的值是一个对象 称之为原型
        //原型链 对象都有个_proto_属性，这个属性指向对象的原型对象，原型对象也是对象，也有_proto_属性，指向原型对象的原型对象这样一层一层的链结构称之原型链
        const qcopy = (obj) => {
            let newObj = Array.isArray(obj) ? [] : {}
            for (let i in obj) {
                newObj[i] = obj[i]
            }
            return qcopy
        }

        const shenCopy = (obj) => {
            let newObj = Array.isArray(obj) ? [] : {}
            for (let i in obj) {
                if (typeof obj === "object") {
                    newObj[i] = shenCopy(obj[i])
                } else {
                    ewObj[i] = obj[i]
                }
            }
        }

        const maopap = (arr) => {
            let len = arr.length
            for (let j = 0; j < len - 1; j++) {
                for (let i = 0; i < len - 1 - j; i++) {
                    if (arr[i] > arr[i + 1]) {
                        [arr[i], arr[i + 1]] = [arr[i + 1], arr[1]]
                    }
                }
            }
        }
        //三次握手：
        // 1，发送方 发送一个带有syn标志的数据包给接收方
        // 2，接收方接到到后，回传一个带有syn/ack标记的数据包，确认信息，表示我接收到了
        // 3，发送方接收到后。发送一个带有ack标记的数据包，代表我知道了，表示握手结束
        //四次挥手：
        // 1，第一次挥手，client发送一个fin，用来关闭client到server的数据传送。client进去fin_wait_1状态
        // 2，第二次挥手，server收到fin后，发送一个ack给client，确认序号为收到序号+1，server进去close——wait状态
        // 3，第三次挥手，server 发送一个fin，用来关闭server到client数据传送 sercer进去last——ack状态
        // 4，第四次挥手，client接受到fin后，client进去time_wait状态，接着发送一个ack给server确认序号为接收到到的序号+1，sercer进去closerd状态完成四次挥手
        
        // 1.盒子塌陷的原因及解决方法
	    //情况一：float （浮动）是盒子脱离标准流 脱离了父元素 导致父元素高度塌陷   
        //解决方法 
        //1 给父元素设置高度   2.使用额外标签法 3 使用单为元素 4使用双伪元素 5给父元素设置overflow-hidden
	    //情况二:两个块级元素嵌套，子元素设置了margin-top 父子元素的margin-top会合并 父元素会跟着子元素移动  
        //解决方法：
        //1 给父元素设置booder-top 2给父元素设置padding-top 3设置浮动 4转化成行内块元素 5给父元素设置overflow-hidden

// Vue 生命周期：

// 创建（Creation）阶段：

// beforeCreate()

// created()

// 挂载（Mounting）阶段：

// beforeMount()

// mounted()

// 更新（Updating）阶段：

// beforeUpdate()

// updated()

// 销毁（Destruction）阶段：

// beforeDestroy()

// destroyed()

// export default {
//   provide () {
//     return {
//        // 普通类型【非响应式】
//        color: this.color, 
//        // 复杂类型【响应式】
//        userInfo: this.userInfo, 
//     }
//   }
// }
// export default {
//   inject: ['color','userInfo'],
//   created () {
//     console.log(this.color, this.userInfo)
//   }
// }

    </script>
</body>

</html>